<template>
	<div class="view-bind-card">
		
		<header-bar title="快钱支付">
			<a class="back" @click="onBackClick"></a>
		</header-bar>

		<div class="body">

			<form @submit.prevent v-show="tab===0">
				<div class="row">
					<div class="col colPan">
						<label>信用卡卡号</label>
						<div class="input">
		                    <input class="pan" type="tel" v-model="pan" placeholder="请输入信用卡卡号" />
		                    <a class="help" @click="bankHelp">支持的银行<i>?</i></a>
		                </div>
		                
	                </div>
				</div>
				<div class="row">
                    <btn :onClick="onNextClick">下一步</btn>
                </div>
			</form>
			
			<form @submit.prevent v-show="tab===1">
				<div class="row">
					<div class="col">
						<label>信用卡有效期</label>
						<div class="input">
		                    <input type="tel" v-model="date" placeholder="09/15输入0915" />
		                    <a class="help" @click="dateHelp"><i>?</i></a>
		                </div>
		            </div>
		            <div class="col">
		            	<label>安全码</label>
						<div class="input">
		                    <input type="tel" v-model="cvv2" placeholder="卡背面末三位数字" />
		                    <a class="help" @click="cvv2Help"><i>?</i></a>
		                </div>
		            </div>
				</div>
				<div class="row">
					<div class="col">
						<label>持卡人姓名</label>
						<div class="input">
		                    <input type="tel" v-model="name" placeholder="请输入持卡人姓名" />
		                </div>
	                </div>
				</div>
				<div class="row">
					<div class="col">
						<label>身份证号</label>
						<div class="input">
		                    <input type="text" v-model="idcard" placeholder="请输入持卡人身份证号" />
		                </div>
	                </div>
				</div>
				<div class="row">
					<div class="col">
						<label>银行预留手机号</label>
						<div class="input">
		                    <input type="tel" v-model="mobile" placeholder="请输入银行预留手机号" />
		                </div>
	                </div>
				</div>
				<div class="row">
					<div class="col">
						<label>验证码</label>
						<div class="input">
		                    <input type="tel" v-model="code" placeholder="请输入验证码" />
		                    <button :class="{fetching:t!==0}" @click="onGetVerCode">{{t===0?'点击获取':`${t}秒后可重发`}}</button>
		                </div>
	                </div>
				</div>
				<div class="row">
                    <btn :onClick="onSubmitClick">支付￥{{fmoney(amount)}}元</btn>
                </div>
			</form>

			<small class="tips">凹凸共享租车服务热线<a href="tel:4006680202">400-668-0202</a></small>
		</div>

	</div>
</template>

<script>
import headerBar from '@/components/header'
import panel from '@/components/panel'
import panelItem from '@/components/panelItem'
import loading from '@/components/loading'
import btn from '@/components/btn'
import toast from '@/components/toast'
import alert from '@/components/alert'
import fmoney from '@/assets/fmoney'
import $http from '@/assets/http'
import {getMobile} from '@/assets/token'

export default {
	data() {
		return {
			tab: 0,
			t: 0,
			fmoney,
			pan: '',
			date: '',
			cvv2: '',
			name: '',
			idcard: '',
			mobile: '',
			code: '',
			amount: 0
		}
	},
	created() {
		this.amount = this.$route.params.amount
	},
	methods: {
		fetchSmsCode(mobile) {
            return $http.request({
                method: 'put',
                url: `/api/smsCode/${mobile}`,
            })
        },
		async onGetVerCode() {
			this.mobile = this.mobile.trim()

            if (this.mobile === '') {
                toast.show('手机号码不能为空')
            } else if(!(/^1[34578]\d{9}$/).test(this.mobile)){
                toast.show('请输入正确的手机号码')
            } else {
                loading.show()
                try {
                    const res = await this.fetchSmsCode(this.mobile)
                    toast.show('短信已发送，请注意查收'+res.data.tmpCode)
                    this.runTime(60)
                } catch(e) {
                    if (e.response.data.errorMsg) {
                        toast.show(e.response.data.errorMsg)
                    } else {
                        alert.show('系统错误，请稍后再试')
                    }
                }
                loading.hide()
            }
		},
		async onNextClick() {

			if (this.pan !== '') {
				loading.show()
				try {
					const pan = this.pan.replace(/\s/g, '')
					const {data:res} = await this.fetchCardInfo(pan)

					if (res.resCode === '000000') {
						this.tab = 1
					} else {
						toast.show(res.resMsg)
					}

				} catch(e) {
					if (e.response.data.errorMsg) {
	                    toast.show(e.response.data.errorMsg)
	                } else {
	                    alert.show('系统错误，请稍后再试')
	                }
				}
				loading.hide()
			}
		},
		fetchCardInfo(cardNo) {
			const mobile = getMobile()
			const {id} = this.$route.params
			return $http.request({
                method: 'post',
                url: `/ins/bill99/queryCardInfo`,
                data: {
                	mobile,
                	orderNo: id,
                	cardNo,
                	source: 11,
                	payKind: 6,
                }
            })
		},
		onBackClick() {
			this.$router.back()
		},
		async onSubmitClick() {
			this.pan = this.pan.trim()
			this.date = this.date.trim()
			this.cvv2 = this.cvv2.trim()
			this.name = this.name.trim()
			this.idcard = this.idcard.trim()
			this.mobile = this.mobile.trim()
			this.code = this.code.trim()

			// 验证18位身份证号的正则
			const isIdcard = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/

			if (this.pan === '') {
				toast.show('请输入信用卡卡号')
			}if (this.date === '') {
				toast.show('请输入信用卡有效期')
			} else if (this.cvv2 === '') {
				toast.show('请输入安全码')
			} else if (this.name === '') {
				toast.show('请输入持卡人姓名')
			} else if (this.idcard === '') {
				toast.show('请输入持卡人身份证号')
			} else if (!isIdcard.test(this.idcard)) {
				toast.show('请输入正确的身份证号')
			} else if (this.mobile === '') {
				toast.show('请输入银行预留手机号')
			} else if(!(/^1[34578]\d{9}$/).test(this.mobile)){
                toast.show('请输入正确的手机号码')
            } else {

            	const obj = {
            		orderNo: this.$route.params.id,
            		mobile: this.mobile,
            		pan: this.pan,
            		expiredDate: this.date,
            		cvv2: this.cvv2,
            		cardHolderName: this.name,
            		cardHolderId: this.idcard,
            		phoneNO: this.mobile,
            		payKind: 6,
            	}

            	await this.fetchData(obj)



            }
		},
		fetchData(data) {
			return $http.request({
				method: 'post',
	            url: `/ins/bill99/pay01ValidCode`,
	            data
			})
		},
        runTime(t) {
            this.t = t
            if (t > 0) {
                setTimeout(() => {
                    this.runTime(--t)
                }, 1000)
            }
        },
        dateHelp() {
        	alert.show({
        		className: 'dateHelp'
        	})
        },
        cvv2Help() {
        	alert.show({
        		className: 'cvv2Help'
        	})
        },
        bankHelp() {
        	alert.show({
        		className: 'bankHelp',
        		desc: `<ul class="clearfix">
					<li>工商银行</li>
					<li>农业银行</li>
					<li>中国银行</li>
					<li>交通银行</li>
					<li>招商银行</li>
					<li>浦发银行</li>
					<li>中信银行</li>
					<li>广发银行</li>
					<li>兴业银行</li>
					<li>民生银行</li>
					<li>平安银行</li>
					<li>深发银行</li>
					<li>邮储银行</li>
					<li>光大银行</li>
					<li>华夏银行</li>
					<li>宁波银行</li>
					<li>上海银行</li>
			    </ul>`
        	})
        }
	},
	watch: {
		date(v) {
			v = v.trim()
			if (v !== '') {
				this.date = v.substr(0,4)
			}
		},
		cvv2(v) {
			v = v.trim()
			if (v !== '') {
				this.cvv2 = v.substr(0,3)
			}
		},
		mobile(v) {
			v = v.trim()
			if (v !== '') {
				this.mobile = v.substr(0,11)
			}
		},
		idcard(v) {
			v = v.trim()
			if (v !== '') {
				this.idcard = v.toUpperCase().substr(0,18)
			}
		},
		pan(v) {
			v = v.trim()
			if (v !== '') {
				v = v.replace(/\s/g, '').replace(/\D/g, '')
				v = v.substr(0, 16)
				v = v.split('')
				let newV = ''
				for (let i = 0; i < v.length; i++) {
					if (i % 4 !== 0 || i === 0) {
						newV += v[i]
					} else {
						newV += ' '+ v[i]
					}
				}
				this.pan = newV
			}
		}
	},
	components: {
		headerBar,
		panel,
		panelItem,
		btn,
	}
}
</script>

<style scoped lang="scss">
	@import './style'
</style>